<template>
    <div id="manager">
      <div class="head">
        <div class="left">
          <router-link to="/UserManagement/Manager/ManagerAdd"><i class="el-icon-plus"></i> 添加</router-link>
        </div>
        <div class="right">
          <el-input v-model.trim="input_name" placeholder="请输入姓名"></el-input>
          <el-input v-model.trim="input_tel" placeholder="请输入联系方式"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </div>
      </div>

      <div class="content">
                <!-- 表格内容 -->
        <el-table :data="tableData" style="width: 100%;" class="tableStyle">
            <el-table-column
                prop="logo"
                label="头像"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="age"
                label="年龄">
            </el-table-column>
            <el-table-column
                prop="gender"
                label="性别">
                <template slot="header" >
                  <el-dropdown @command="handleCommand1">
                    <span class="el-dropdown-link">
                      性别<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" >
                      <el-dropdown-item command="male">男</el-dropdown-item>
                      <el-dropdown-item command="female">女</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
            </el-table-column>
            <el-table-column
                prop="tel"
                label="联系方式">
            </el-table-column>
            <el-table-column
                prop="character"
                label="角色">
                <template slot="header" >
                  <el-dropdown @command="handleCommand2">
                    <span class="el-dropdown-link">
                      角色<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" >
                      <el-dropdown-item command="manager">管理员</el-dropdown-item>
                      <el-dropdown-item command="drugManagement">药品管理</el-dropdown-item>
                      <el-dropdown-item command="orderManagement">订单管理</el-dropdown-item>                     
                      <el-dropdown-item command="suplier">供应商管理</el-dropdown-item>                     
                      <el-dropdown-item command="purchaseManagement">进货管理</el-dropdown-item>                     
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
            </el-table-column>
            <el-table-column
                prop="others"
                label="备注">
            </el-table-column>
            <el-table-column width="200px" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="bottom">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </div>
      </div>    
    </div>
    
</template>
<script>
   export default {
      data() {
        return {
          input_name: '',
          input_tel: '',
              // 表格数据
          tableData: [{
            id: '1',
            logo: '1',
            name: '王小虎',
            age: '20',
            gender: '女',
            tel: '111112',
            character: '管理员',
            others: '无',
            op: '修改'
          }, {
            id: '2',
            logo: '1',
            name: '王大虎',
            age: '20',
            gender: '男',
            tel: '111112',
            character: '药品管理',
            others: '无',
            op: '修改'
          }, {
            id: '3',
            logo: '1',
            name: '王中虎',
            age: '20',
            gender: '男',
            tel: '111131',
            character: '订单管理',
            others: '无',
            op: '修改'
          }, {
            id: '4',
            logo: '1',
            name: '王小虎',
            age: '20',
            gender: '女',
            tel: '111111',
            character: '供应商管理',
            others: '无',
            op: '修改'
          }, {
            id: '5',
            logo: '1',
            name: '王小虎',
            age: '20',
            gender: '男',
            tel: '111111',
            character: '进货管理',
            others: '无',
            op: '修改'
          }]
        }
      },
      methods: {
        // 搜索方法
        search() {
          if(this.input_name === '' || this.input_tel === '') {
            alert("内容不能为空")
            return;
          }
          // console.log(this.input_name + this.input_tel)
          this.$confirm('你确定要执行此操作吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            this.$message({
              type: 'success',
              message: '搜索成功!'
            });
            this.tableData = this.tableData.filter(item => item.name === this.input_name && item.tel === this.input_tel);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消搜索'
            });
          });
        },
        // 修改方法
        handleEdit(index, row) {
          this.$router.push("/UserManagement/Manager/ManagerModify")
          console.log(index, row);
        },
        // 删除方法
        handleDelete(id) {
          this.$confirm('你确定要删除此数据吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.tableData = this.tableData.filter(item => item.id != id);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        // 下拉菜单1
        handleCommand1(command) {
          if(command === 'male') {
            this.tableData = this.tableData.filter(item => item.gender === "男")
          }
          if(command === 'female') {
            this.tableData = this.tableData.filter(item => item.gender === "女")
          }
          // this.$message('click on item ' + command);
        },
        // 下拉菜单2
        handleCommand2(command) {
          if(command === 'manager') {
            this.tableData = this.tableData.filter(item => item.character === "管理员")
          }
          if(command === 'drugManagement') {
            this.tableData = this.tableData.filter(item => item.character === "药品管理")
          }
          if(command === 'orderManagement') {
            this.tableData = this.tableData.filter(item => item.character === "订单管理")
          }
          if(command === 'suplier') {
            this.tableData = this.tableData.filter(item => item.character === "供应商管理")
          }
          if(command === 'purchaseManagement') {
            this.tableData = this.tableData.filter(item => item.character === "进货管理")
          }
      }
    }
  }
</script>

<style lang="less">
  #manager {
    // height: 100%;
    .content {
      margin-left: 30px;
      margin-right: 30px;
      .tableStyle {
        background-color: #e4f4fe;
      }
      th.el-table__cell {
        background-color: #e4f4fe;
      }
      .el-table__body {
        -webkit-border-vertical-spacing: 20px;
      }
      td.el-table__cell {
        // background-color: #e4f4fe;
      }
    }
    .head {
      display: flex;
      justify-content: space-between;
      margin: 30px;
      .left {
        width: 90px;
        height: 40px;
        background-color: #409eff;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        a {
          margin: auto;
          color: white;
        }
      }
      .right {
        .el-input {
          width: 160px; 
          margin-right: 30px; 
          .el-input__inner {
            border-radius: 20px;
            height: 35px;
          }
        }
      }
    }
  }

</style>